<script setup>

import Board from './Board.vue'
import Gameover from './Gameover.vue';
import { ref } from 'vue'

//注册组件
const components = { Board, Gameover }
const currentPage = ref('Board')
//SOLVED: board的score传递问题,出现问题会黑屏
const appScore = ref(0)
const appMaxStreak = ref(0)
const appMaxMultiply = ref(1)
let appClickCount = 0

//从board组件接收gameover事件，接受游戏结果数据
const handleGameover = (score, maxStreak, maxMultiply, clickCount) => {
    currentPage.value = 'Gameover'
    appScore.value = score
    appMaxStreak.value = maxStreak
    appMaxMultiply.value = maxMultiply
    appClickCount = clickCount

} 
</script>
//TODO:添加用户反馈和建议页面,可以做成一个模态框,信息自动发到我的邮箱.

<template>
    <div id="app">
        <!-- NOTE:动态组件需要component标签包裹 -->
        <component id="app" :is="components[currentPage]" @restart="currentPage = 'Board'"
            @gameover="(score, maxStreak, maxMultiply, clickCount) => handleGameover(score, maxStreak, maxMultiply, clickCount)"
            :score="appScore" :maxMultiply="appMaxMultiply" :maxStreak="appMaxStreak" :clickCount="appClickCount">
        </component>
        <!-- //TODO:footer会显示在页面正中央的问题 -->
    </div>
    <footer>
        <a href="mailto:gaocool2009@163.com">@gyy</a>
    </footer>
</template>

<style scoped>
#app {
    display: flex;
    flex-direction: column;
    background-color: aliceblue;
}

footer {
    text-align: center;
    margin-top: 20px;
}
</style>